<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>用户中心 - {$site_name}</title>
    <link rel="bookmark" href="__ROOT__/favicon.ico"/>
    <tc_include file="Public/common:header"/>
    <script type="text/javascript"
            src="https://api.map.baidu.com/api?v=2.0&ak=sW2IclEDTzxivvyYWIiu70mlzmgQCcue&s=1"></script>
</head>
<body>
<!--header start-->
<tc_include file="Public/common:pc_header"/>
<!--header end-->
<!--body start-->
<div class="layui-main pc_bg_white pc_user_center">
    <tc_include file="Public/common:pc_left"/>
    <div class="pc_user_center_right">
        <tc_include file="Public/common:pc_poptip"/>
        <div class="pc_user_center_order_box">
            <div class="layui-form">
                <div class="layui-form-item">
                    <label class="layui-form-label">出发地 <span style="color: red">*</span></label>

                    <div class="layui-input-block">
                        <input type="text" name="send_address" lay-verify="send_address" autocomplete="off"
                               placeholder="请输入出发地"
                               class="layui-input" id="send_address">

                        <div id="send_address_searchResultPanel"
                             style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">门牌号 </label>

                    <div class="layui-input-block">
                        <input type="text" name="send_address_floor" autocomplete="off" placeholder="请填写门牌号"
                               class="layui-input" id="send_address_floor">

                        <div style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">发件人电话 <span style="color: red">*</span></label>

                    <div class="layui-input-block" style="width: 190px;">
                        <input type="tel" name="send_mobile" id="send_mobile" lay-verify="phone"
                               placeholder="请填写发件人联系人电话"
                               autocomplete="off" class="layui-input">

                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">目的地 <span style="color: red">*</span></label>

                    <div class="layui-input-block">
                        <input type="text" name="reci_address" lay-verify="title" autocomplete="off"
                               placeholder="请输入目的地"
                               class="layui-input" id="reci_address">

                        <div id="reci_address_searchResultPanel"
                             style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">门牌号</label>

                    <div class="layui-input-block">
                        <input type="text" name="send_address" autocomplete="off" placeholder="请填写门牌号"
                               class="layui-input" id="reci_address_floor">

                        <div style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">收件人电话 <span style="color: red">*</span></label>

                    <div class="layui-input-block" style="width: 170px;">
                        <input type="tel" name="reci_mobile" id="reci_mobile" lay-verify="phone"
                               placeholder="请输入收件人联系人电话"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">物品分类</label>

                    <div class="layui-input-block" style="width: 200px">
                        <select name="res_type" lay-verify="required" id="res_type">
                            <volist name="res_type" id="vo">
                                <option value="{$vo.res_type_id}">{$vo.res_type}</option>
                            </volist>
                        </select>
                    </div>
                </div>

                <!--<div class="layui-form-item">-->
                <!--<label class="layui-form-label">小费</label>-->

                <!--<div class="layui-input-block" style="width: 100px;">-->
                <!--<select name="fee">-->
                <!--<option value="">+0元</option>-->
                <!--<option value="0">5元</option>-->
                <!--<option value="1">15元</option>-->
                <!--<option value="2">20元</option>-->
                <!--<option value="3">25元</option>-->
                <!--<option value="4">30元</option>-->
                <!--</select>-->
                <!--</div>-->
                <!--</div>-->

                <!--<div class="layui-form-item">-->
                <!--<label class="layui-form-label">跑客团队</label>-->

                <!--<div class="layui-input-block" style="width: 200px;">-->
                <!--<select name="company_id">-->
                <!--<volist name="company" id="vo">-->
                <!--<option value="{$vo.company_id}">{$vo.company_name}</option>-->
                <!--</volist>-->
                <!--</select>-->
                <!--</div>-->
                <!--</div>-->
                <div class="layui-form-item">
                    <label class="layui-form-label">预约时间</label>

                    <div class="layui-input-block" style="width: 200px;">
                        <input class="layui-input" id="reservation_time" placeholder="(立即开始)预约送优惠券"
                               onclick="layui.laydate({elem: this, min: laydate.now(), max: laydate.now(+2),istime: true, format: 'YYYY-MM-DD hh:mm:ss'})">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">补充说明</label>

                    <div class="layui-input-block">
                        <textarea placeholder="补充说明" id="remark" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">跑腿费用</label>

                    <div class="layui-input-block" id="money" style="color: red;font-size: 15px;line-height: 36px;">
                        ￥7元起步
                    </div>
                </div>

                <div class="layui-form-item" style="margin: 30px 0 ">
                    <label class="layui-form-label">支付方式</label>

                    <div class="layui-input-block">
                        <input type="radio" name="pay_method" value="2"
                               title="<img style='width: 130px;' src='__PUBLIC__/tools/layui/images/pc_WePayLogo.png'>"
                               checked="">
                        <!--<input type="radio" name="pay_method" value="2"-->
                        <!--title="<img style='width: 100px;' src='__PUBLIC__/tools/layui/images/pc_alipay.png'>">-->
                        <input type="radio" name="pay_method" value="3"
                               title="余额(￥{$purse_balance})">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"></label>

                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit="" lay-filter="formDemo">支付并发单</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
                <input name="order_type" value="1" type="hidden">

            </div>
        </div>
    </div>
</div>

<div style="clear:both"></div>
<!--body end-->
<!--footer start-->
<tc_include file="Public/common:pc_footer"/>
<!--footer end-->
<script src="__PUBLIC__/tools/layui/layui.js"></script>
<script src="__PUBLIC__/js/jquery.js"></script>
<script src="__PUBLIC__/js/layer/layer.js"></script>
<script>
var base = null;
var take_send_data = {
    "uid": "", //用户ID  ==
    "city_id": 128, //城市ID  ==
    "res_type": "", //物品类型  ==
    "order_type": 1, //订单类型         ==
    "total_mileage": "", //总历程数         ==
    "remark": "", //补充说明            ==
    "remark_voice": "", //补充说明语音地址  ==
    "send_address": "", //出发地址      ==
    "send_address_floor": "", //出发地址补充（楼道信息）  ==
    "send_mobile": "", //出发地人手机号      ==
    "send_longit": "", //出发地址经度  ==
    "send_latit": "", //出发地址维度  ==
    "reci_address": "", //目的地址   ==
    "reci_address_floor": "", //目的地址补充（楼道信息） ==
    "reci_mobile": "", //目的地人手机号    ==
    "reci_longit": "", //目的地址经度     ==
    "reci_latit": "", //目的地址维度      ==
    "conveyance_id": 1, //交通工具ID    ==
    "up_server": "", //升级服务         ==
    "fee": 0.00, //小费           ==
    "coupon_id": "", //优惠券ID       ==
    "company_id": 1, //跑客团队ID       ==
    "is_reservation": 0, //是否预约单    ==
    "reservation_time": "", //预约时间      ==
    "voucher_no": "", //商户订单ID     ==
    "order_amount": "", //跑腿订单金额    ==
    "real_amount": "", //实付金额
    "pay_method": 2 //支付方式 1 支付宝支付 2 微信支付 3 余额支付
};
//初始化用户ID
take_send_data.uid = {:session('userinfo.user_id')};

layui.config({
    base: '__PUBLIC__/tools/layui/model/'
}).extend({
    base: 'base'
});
layui.use(['element', 'form', 'layer', 'base', 'laydate', 'jquery'], function () {
    var element = layui.element(), form = layui.form(), layer = layui.layer, laydate = layui.laydate(), $ = layui.jquery;
    base = layui.base;
    //========验证============
    form.verify({
        send_address: function (value) {
            if (!value) {
                return '请先填写出发地';
            }
        },
        reci_address: function (value) {
            if (!value) {
                return '请先填写目的地';
            }
        }

    });
    //=========提交=============
    form.on('submit(formDemo)', function (data) {
        var reservation_time = $("#reservation_time").val();
        var pay_meth = $('input[name="pay_method"]:checked ').val();
        //console.log(reservation_time);
        //生成唯一订单号
        var myDate = new Date();
        var tradeNO = 'WKTRADENO' + myDate.getFullYear() + myDate.getMonth() + myDate.getDate() + myDate.getHours() + myDate.getMinutes() + myDate.getSeconds() + RndNum(6);
        //点击按钮触发这个回调
        take_send_data.res_type = $("#res_type").find("option:selected").text();
        //备注
        take_send_data.remark = $("#remark").val();
        //出发地楼层信息
        take_send_data.send_address_floor = $("#send_address_floor").val();
        //发货人手机号
        take_send_data.send_mobile = $("#send_mobile").val();
        //楼层信息
        take_send_data.reci_address_floor = $("#reci_address_floor").val();
        //收货人手机号
        take_send_data.reci_mobile = $("#reci_mobile").val();
        //预约
        if (reservation_time) {
            take_send_data.is_reservation = 1;
            take_send_data.reservation_time = $("#reservation_time").val();
        }
        //唯一订单号
        take_send_data.voucher_no = tradeNO;
        //支付方式
        take_send_data.pay_method = pay_meth;

        console.log(take_send_data);
        var index = layer.msg('加载中', {
            icon: 16, shade: 0.01
        });
        //1.ajax模拟下单
        $.ajax({
            url: "{:U('Api/Portal/makeOrder')}",
            dataType: 'json',
            data: take_send_data,
            success: function (ret) {
                switch (ret.retCode) {
                    case 1:
                        layer.close(index);
                        if(pay_meth==1){


                        }else if(pay_meth==2){
                            //如果订单生成成功 弹框
                            layer.open({
                                type: 2,
                                title: '微信扫码支付',
                                shadeClose: true,
                                shade: 0.8,
                                area: ['280px', '40%'],
//                        content: "Portal/Index/bar_code/index.php?Out_trade_no="+ret.retValue.voucher_no+"&Total_fee="+ret.retValue.pay_amount //iframe的url
                                content: "{:U('Portal/Index/bar_code')}?out_trade_no=" + ret.retValue.voucher_no + "&total_fee=" + ret.retValue.pay_amount //iframe的url
                            });
                            //余额支付
                        }else if(pay_meth==3){
                            var indexs = layer.msg('余额支付中', {
                                icon: 16, shade: 0.01
                            });
                            $.getJSON("{:U('Api/Portal/userBalancePay')}?order_id="+ret.retValue.order_id+"&uid={:session("userinfo.user_id")}"+"&out_trade_no="+ret.retValue.voucher_no,function(ret){
                                if(ret.retCode==200){
                                    layer.confirm('支付成功，是否需要继续发单？', {
                                        btn: ['是','查看订单'] //按钮
                                    }, function(){
                                        window.location.reload();
                                        layer.msg('您可以继续发单！');
                                    }, function(){
                                        layer.msg('抱歉，该功能正在开发！');
                                    })
                                }else{
                                    layer.msg('抱歉，支付错误');
                                }

                            });
                        }

//
                        break;
                    case 0:
                        layer.close(index);
                        layer.alert(ret.retDesc);
                        break;

                }
            }
        });
        return false;
    });

});


//地址的监听
function address() {
    //如果两个地址都存在则
    if (take_send_data.send_address && take_send_data.reci_address) {
        var index = layer.msg('计算中', {
            icon: 16, shade: 0.01
        });
        $.getJSON('{:U('Api/Portal/getOrderAmount')}' + '?startLng=' + take_send_data.send_longit + '&startLat=' + take_send_data.send_latit + '&endLng=' + take_send_data.reci_longit + '&endLat=' + take_send_data.reci_latit + '&cityId=128&uid='+{:session("userinfo.user_id")}, function (ret) {
        layer.close(index);
        //实付金额
        take_send_data.real_amount = ret.retValue.couponMoney;
        //总价格
        take_send_data.order_amount = ret.retValue.totalPrice;
        //总历程数
        take_send_data.total_mileage = ret.retValue.totalkilometre;
        if(ret.retValue.userCouponId){
            //优惠券ID
            take_send_data.coupon_id = ret.retValue.userCouponId;
            $("#money").html("￥" + ret.retValue.couponMoney+"(已使用"+ret.retValue.coupon_value+".00)元优惠券");
        }else{
            console.log(ret.retValue.totalPrice);
            $("#money").html("￥" + ret.retValue.totalPrice);
        }
    }
);
}
}


// 百度地图API功能
function G(id) {
    return document.getElementById(id);
}
var map = new BMap.Map("l-map");
//map.centerAndZoom("北京",12);                   // 初始化地图,设置城市和地图级别。
var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
        {
            "input": "send_address", "location": map
        });
var acs = new BMap.Autocomplete(    //建立一个自动完成的对象
        {
            "input": "reci_address", "location": map
        });
ac.addEventListener("onhighlight", function (e) {  //鼠标放在下拉列表上的事件
    var str = "";
    var _value = e.fromitem.value;
    var value = "";
    if (e.fromitem.index > -1) {
        value = _value.province + _value.city + _value.district + _value.street + _value.business;
    }
    str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
    value = "";
    if (e.toitem.index > -1) {
        _value = e.toitem.value;
        value = _value.province + _value.city + _value.district + _value.street + _value.business;
    }
    str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
    G("send_address_searchResultPanel").innerHTML = str;
});

var myValue;
ac.addEventListener("onconfirm", function (e) {    //鼠标点击下拉列表后的事件
    var _value = e.item.value;
    myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
    G("send_address_searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
    setPlace();
});

function setPlace() {
    function myFun() {
        var pp = local.getResults().getPoi(0);    //获取第一个智能搜索的结果

        take_send_data.send_longit = pp.point.lng;
        take_send_data.send_latit = pp.point.lat;
        take_send_data.send_address = '[' + pp.address + ']' + pp.title;

        //地址的监听
        address();

        console.log('send_longit==' + pp);
    }

    var local = new BMap.LocalSearch(map, { //智能搜索
        onSearchComplete: myFun
    });
    local.search(myValue);
}

acs.addEventListener("onhighlight", function (e) {  //鼠标放在下拉列表上的事件
    var str = "";
    var _value = e.fromitem.value;
    var value = "";
    if (e.fromitem.index > -1) {
        value = _value.province + _value.city + _value.district + _value.street + _value.business;
    }
    str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

    value = "";
    if (e.toitem.index > -1) {
        _value = e.toitem.value;
        value = _value.province + _value.city + _value.district + _value.street + _value.business;
    }
    str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
    G("reci_address_searchResultPanel").innerHTML = str;
});

var myValue;
acs.addEventListener("onconfirm", function (e) {    //鼠标点击下拉列表后的事件
    var _value = e.item.value;
    myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
    G("reci_address_searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;

    setPlaces();
});

function setPlaces() {
    function myFun() {
        var pp = local.getResults().getPoi(0);    //获取第一个智能搜索的结果
        take_send_data.reci_longit = pp.point.lng;
        take_send_data.reci_latit = pp.point.lat;
        take_send_data.reci_address = '[' + pp.address + ']' + pp.title;
        console.log('reci_longit==' + pp);
        //地址的监听
        address();
    }

    var local = new BMap.LocalSearch(map, { //智能搜索
        onSearchComplete: myFun
    });
    local.search(myValue);
}

//随机数函数
function RndNum(n) {
    var rnd = "";
    for (var i = 0; i < n; i++)
        rnd += Math.floor(Math.random() * 10);
    return rnd;
}
</script>

</body>
</html>